<template>
  <div>
    <!-- 模糊搜索 -->
    <el-form
      ref="formInline"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="买家">
        <el-input
          v-model="formInline.buyer"
          placeholder="请输入买家"
        ></el-input>
      </el-form-item>
      <el-form-item label="金额">
        <el-input
          v-model="formInline.money"
          placeholder="请输入金额"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单号">
        <el-input
          v-model="formInline.order"
          placeholder="请输入订单号"
        ></el-input>
      </el-form-item>

      <!--      <el-form-item-->
      <!--          v-for="(item, index) in allOptions"-->
      <!--          :key="index"-->
      <!--          :label="item.label"-->
      <!--          :v-model="item.model"-->
      <!--      >-->
      <!--        <el-input :placeholder="item.placeholder"></el-input>-->
      <!--      </el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onadd">新增</el-button>
      </el-form-item>

      <!--      柱状图按钮-->
      <el-form-item>
        <el-button type="primary" @click="echartsDemo">查看退款数据</el-button>
      </el-form-item>
    </el-form>
    <!--     列表-->
    <template>
      <el-table :data="tableData" style="width: 100%">
        <!--     列表-->
        <el-table-column
          v-for="(item, index) in stateOptions"
          :key="index"
          :formatter="item.formatter"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
        >
        </el-table-column>
        <!--        操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="edits(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deletes(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pageOne3
        :page-num.sync="formInline.pageNum"
        :page-size.sync="formInline.pageSizes"
        :total="total"
        Pagination
        @change="this.init"
      ></pageOne3>
      {{ formInline.pageNum }}n {{ formInline.pageSizes }}s {{ total }}t
      <!--      <Popover :refName="'ref'+scope.$index" @sureMove="_=>sureMove( _,scope.row.id)"></Popover>-->
    </template>
    <!--      柱状图弹出框-->
    <el-dialog
      :visible.sync="dialogVisible"
      style="margin-top: -10vh"
      title="退款柱状图"
      width="79%"
    >
      <!--      :before-close="handleClose"-->

      <div>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div ref="main" style="width: 100%; height: 500px"></div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog">查看详情</el-button>
      </span>
    </el-dialog>
    <!--    编辑弹出框-->
    <el-dialog
      :title="popup === 0 ? '新增表单' : '修改表单'"
      :visible.sync="dialogFormVisible"
      @close="close"
    >
      <el-form ref="formData" :model="formData" :rules="rules">
        <div style="display: flex; flex-direction: column">
          <!-- 新增表单 姓名-->
          <!-- span="6"设置表格在页面中占据 %多少-->
          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="金额" prop="jinqian">
              <el-input
                v-model="formData.jinqian"
                placeholder="请输入金额"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单号" prop="zhanghao">
              <el-input
                v-model="formData.zhanghao"
                placeholder="请输入订单号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="地址" prop="address">
              <el-input
                v-model="formData.address"
                placeholder="请输入地址"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="日期" prop="date">
              <el-input
                v-model="formData.date"
                placeholder="请输入日期"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="退款状态" prop="sex">
              <el-select v-model="formData.sex" placeholder="请选择状态">
                <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="affirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import api from "../../api/index";

import { PageOne, UpAdd, Update, UPDel } from "../../api/modules/pageOne"; //引入请求封装

export default {
  name: "",
  components: {},
  data() {
    return {
      total: 0, //总数据量
      formInline: {
        name: "",
        buyer: "", //买家
        money: "", //金额
        order: "", //订单号,
        default: false,
        pageNum: 1,
        pageSizes: 10,
      }, //模糊搜素

      allOptions: [
        {
          label: "买家",
          model: "buyer",
          placeholder: "买家",
        },
        {
          label: "金额",
          model: "money",
          placeholder: "金额",
        },
        {
          label: "订单号",
          model: "order",
          placeholder: "订单号",
        },
      ], //循环搜索数据
      stateOptions: [
        {
          prop: "id",
          label: "序号",
          width: "80px",
        },
        {
          prop: "name",
          label: "买家",
          width: "150px",
        },
        {
          prop: "jinqian",
          label: "金额",
          width: "150px",
        },
        {
          prop: "date",
          label: "日期",
          width: "150px",
        },
        {
          prop: "sex",
          formatter: (row) => {
            return row.sex === 0 ? "待退款" : row.sex === 1 ? "退款" : "未知";
          },
          label: "退款状态",
          width: "150px",
        },
        {
          prop: "zhanghao",
          label: "订单号",
        },
        {
          prop: "address",
          label: "地址",
          width: "200px",
        },
      ], //循环列表数据
      stateOption: [
        {
          value: 0,
          label: "待退款",
        },
        {
          value: 1,
          label: "退款",
        },
        {
          value: "",
          label: "未知",
        },
      ], //状态配置项
      tableData: [], //表单容器
      allList: [], //模糊搜索容器
      popup: undefined,
      dialogFormVisible: false, //编辑弹出框
      dialogVisible: false, //柱状图弹出框

      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        jinqian: [{ required: true, message: "请输入金额", trigger: "blur" }],
        zhanghao: [
          { required: true, message: "请输入订单号", trigger: "change" },
        ],
      }, //验证规则
      formData: {
        name: undefined, //买家
        jinqian: undefined, //金额
        zhanghao: undefined, //订单号
        address: undefined, //地址
        date: undefined, //日期
      }, //编辑、新增form表单数据
    };
  },

  async created() {
    //页面创建获取数据渲染
    this.tableData = await this.init();
    // this.allList = await this.init();
    // console.log(this.tableData)
  }, //页面创建获取数据渲染

  //方法
  methods: {
    //页码或者每页数量变化监听

    echartsDemo() {
      this.dialogVisible = true;
      //dom发生改变的时候

      this.$nextTick((_) => {
        // 基于准备好的dom，初始化echarts实例

        const myChart = this.$echarts.init(this.$refs.main);
        // 指定图表的配置项和数据
        const option = {
          title: {
            text: "退款柱状图",
          },
          legend: {
            data: ["退款数量"],
          },
          xAxis: {
            type: "category",
            data: [
              "星期日",
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "退款数量",
              names: "总数量",
              data: [120, 200, 150, 80, 70, 110, 130],

              type: "bar",
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
    }, //引用树桩图
    close() {
      this.formClear("formData", this.formData);
      this.formData.state = undefined;
    }, //编辑、新增表单 关闭弹窗 的监听数据清空
    init() {
      return new Promise((reslove) => {
        // api.pageOne.getPageOne()
        PageOne().then((res) => {
          let { data } = res;
          // console.log("res", res)
          this.total = data.length;
          // console.log("data.length", data.length)
          reslove(data);
        });
      });
    }, //请求数据接口初始化
    deletes(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          UPDel("DingPageOne", row)
            // console.log(row)
            // axios
            //   .delete(`http://localhost:3001/DingPageOne/${row.id}`)
            .then((res) => {
              // console.log(res)
              window.location.reload();
              this.init();
              // for (const [index, item] of this.tableData.entries()) {
              //   if (item.id === id) {
              //     this.tableData.splice(index, 1)
              //     this.$message.success('删除成功')
              //     break;
            });
          setTimeout(this.$message.success("删除成功"), 2000);
        })
        .catch(() => {
          this.$message.success("删除失败");
        });
    }, //删除按钮

    async onSubmit() {
      //allList 与模糊搜索并没有进行绑定，但 通过if 判断输入框条件 让allList 与输入框有关联
      const { buyer, money, order } = this.$deep(this.formInline); //深拷贝 并 结构 formInline里面的数据
      const allList = await this.init(); //让allList 变成 总数据
      if (!buyer && !money && !order) {
        //判断输入框是否为空
        //"!"取反  如果输入框内容为空
        this.tableData = allList; //allList总数据 =  tableData表单容器
      } else {
        //如果不为空
        //列表内容 = allList 过滤列表=输入框里面的值
        this.tableData = allList.filter(
          (item) =>
            item.zhanghao === order ||
            item.name === buyer ||
            item.jinqian === money
        );
      }
    }, //查询点击事件
    edits(index, row) {
      this.popup = 1; //让弹出框为修改页面
      this.dialogFormVisible = true; //让弹出框，弹出
      this.formData = this.$deep(row); //将输入的数据深拷贝，
    }, //编辑按钮
    onadd() {
      this.popup = 0; //让弹出框为修改页面
      this.dialogFormVisible = true; //让弹出框，弹出
    }, //新增

    async affirm() {
      //async 异步  请求数据 === 异步，*****
      // 如果用同步，会出现undefined,然后再继续往执行代码，*****
      //用异步，添加await 堵塞，如果出现错误，将永远停留在哪里******
      const adds = this.formSure("formData"); //检查表单是否填了数据,this.formSure调用/utils/form.js封装
      const figures = this.popup; //figure 译：数字  将popup的数字赋值
      if (!adds) return; // if 没填数据就输出，不往下继续进行
      const formData = this.$deep(this.formData);
      if (figures === 0) {
        //数字判断 是0 就执行新增页面 是1就执行编辑页面
        console.log("新增窗口", 1);
        await this.demoAdd(formData); //await（拦截进程） 结合 async(异步)、promise 一起使用，不然无效
        //作用：若promise数据为完成，或者异常，将不在往下进行
      } else {
        await this.demoUpdate(formData);
      }

      this.dialogFormVisible = false; //添加完成后让新增表格隐藏
      await this.init(); //添加完成后再次请求数据
    }, //新增、编辑 --弹框，
    demoUpdate(formData) {
      // console.log(formData)
      const data = {
        name: this.formData.name,
        jinqian: this.formData.jinqian,
        zhanghao: this.formData.zhanghao,
        address: this.formData.address,
        date: this.formData.date,
        sex: this.formData.sex,
      };
      Update("DingPageOne", formData, data)
        // axios
        //   .patch(`  http://localhost:3001/DingPageOne/${this.formData.id}`, {
        //     name: this.formData.name,
        //     jinqian: this.formData.jinqian,
        //     zhanghao: this.formData.zhanghao,
        //     address: this.formData.address,
        //     date: this.formData.date,
        //   })
        .then((res) => {
          window.location.reload();
          this.init();
        });
      this.$message.success("修改成功");
    }, //编辑数据接口

    demoAdd(formData) {
      return new Promise((resolve) => {
        const data1 = {
          name: this.formData.name,
          jinqian: this.formData.jinqian,
          zhanghao: this.formData.zhanghao,
          address: this.formData.address,
          date: this.formData.date,
        };
        UpAdd("DingPageOne", data1)
          // axios
          //   .post(" http://localhost:3001/DingPageOne", {
          //     name: this.formData.name,
          //     jinqian: this.formData.jinqian,
          //     zhanghao: this.formData.zhanghao,
          //     address: this.formData.address,
          //     date: this.formData.date,
          //   })
          .then((res) => {
            window.location.reload();
          });
        this.$message.success("新增成功");
      });
    }, //新增数据接口
    dialog() {
      this.$router.replace("/pageOne1");
      this.dialogVisible = false;
    }, //退款详情确认按钮

    handleSizeChange(e) {
      //通过点击，切换data里面的pageNum的值  e是页面点击的行参
      this.formInline.pageNum = e;
      this.init(); //请求数据
      console.log("切换每页条数的监听", e);
    }, //切换每页条数的监听

    handleCurrentChange(e) {
      //通过点击，切换data里面的pageSize的值  e是页面点击的行参
      this.formInline.pageSize = e;
      this.init(); //请求数据
      console.log(" 切换页码的监听", e);
    }, //切换页码的监听
  }, //方法
  // watch: {
  //   formInline: {
  //     async handler(msg) {//msg就是改变以后的值
  //       const allList = await this.init()
  //       const {buyer, money, order} = msg
  //       if (!buyer && !money && !order) {
  //         //输入框内容为空
  //         this.tableData = allList   //tableData表单容器
  //       } else {
  //         this.tableData = allList.filter(item => item.zhanghao === order || item.name === buyer || item.jinqian === money)
  //       }
  //     },
  //     deep: true,//因为监听整个对象所以要使用深度监听
  //   }
  // }
};
</script>

<style lang='scss' scoped>
</style>